<template>
  <div class="page-container">
    <button class="back-button" @click="goToHome">
      <span class="icon-arrow-left"></span>
      返回首页
    </button>
    <h1>人员调度</h1>
    <p>管理人员状态，为任务分配合适的人员</p>

    <!-- 筛选工具栏 -->
    <div class="filter-bar">
      <button class="filter-btn" :class="{ active: filterStatus === 'all' }" @click="filterStatus = 'all'">
        全部人员
      </button>
      <button class="filter-btn" :class="{ active: filterStatus === 'idle' }" @click="filterStatus = 'idle'">
        仅显示空闲
      </button>
      <button class="filter-btn" :class="{ active: filterStatus === 'busy' }" @click="filterStatus = 'busy'">
        仅显示忙碌
      </button>
    </div>

    <!-- 人员列表 -->
    <div class="staff-grid">
      <div class="staff-card" v-for="staff in filteredStaff" :key="staff.id">
        <div class="staff-header">
          <div class="staff-status" :class="staff.status"></div>
          <h3>{{ staff.name }}</h3>
        </div>
        <div class="staff-info">
          <p><strong>职位：</strong>{{ staff.position }}</p>
          <p><strong>技能：</strong>
            <span class="skill-tag" v-for="skill in staff.skills" :key="skill">{{ skill }}</span>
          </p>
          <p><strong>当前状态：</strong>
            <span :class="`status-text ${staff.status}`">
              {{ staff.status === 'idle' ? '空闲' : '忙碌' }}
            </span>
          </p>
          <p v-if="staff.currentTask"><strong>当前任务：</strong>{{ staff.currentTask }}</p>
        </div>
        <div class="staff-actions">
          <button class="assign-btn" @click="assignTask(staff.id)" :disabled="staff.status !== 'idle'">
            分配任务
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StaffDispatch',
  data() {
    return {
      filterStatus: 'all',
      staffList: [
        {
          id: 1,
          name: '张三',
          position: '高级工程师',
          skills: ['网络', '服务器', '数据库'],
          status: 'idle',
          currentTask: ''
        },
        {
          id: 2,
          name: '李四',
          position: '技术员',
          skills: ['设备维修', '系统调试'],
          status: 'busy',
          currentTask: 'EMG-2023-002 网络修复'
        },
        {
          id: 3,
          name: '王五',
          position: '管理员',
          skills: ['协调', '调度', '培训'],
          status: 'idle',
          currentTask: ''
        },
        {
          id: 4,
          name: '赵六',
          position: '工程师',
          skills: ['安防', '监控系统'],
          status: 'busy',
          currentTask: 'TSK-2023-001 设备检查'
        }
      ]
    }
  },
  computed: {
    filteredStaff() {
      if (this.filterStatus === 'all') return this.staffList;
      return this.staffList.filter(staff => staff.status === this.filterStatus);
    }
  },
  methods: {
    goToHome() {
      this.$router.push('/home');
    },
    assignTask(staffId) {
      const staff = this.staffList.find(item => item.id === staffId);
      if (staff) {
        // 实际应用中可打开任务分配弹窗
        this.$message.prompt(`为 ${staff.name} 分配任务`, '任务分配', {
          inputPlaceholder: '输入任务描述'
        }).then(({ value }) => {
          staff.status = 'busy';
          staff.currentTask = value;
          this.$message.success(`已为 ${staff.name} 分配任务`);
        }).catch(() => {});
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.filter-bar {
  margin: 20px 0;
  display: flex;
  gap: 10px;
}

.filter-btn {
  padding: 6px 15px;
  border: 1px solid #3498db;
  background: white;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn.active {
  background: #3498db;
  color: white;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.staff-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.staff-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.staff-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.staff-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.staff-status.idle {
  background: #2ecc71;
}

.staff-status.busy {
  background: #e74c3c;
}

.staff-info {
  margin-bottom: 15px;
  line-height: 1.6;
}

.skill-tag {
  display: inline-block;
  background: #ecf0f1;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  margin-right: 5px;
  margin-bottom: 5px;
}

.status-text {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.status-text.idle {
  background: #eafaf1;
  color: #27ae60;
}

.status-text.busy {
  background: #fdedeb;
  color: #e74c3c;
}

.staff-actions {
  text-align: right;
}

.assign-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.assign-btn:hover {
  background: #2980b9;
}

.assign-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

/* 复用基础样式 */
.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 20px;
  font-weight: 500;
}

.back-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
}
</style>